<template>
  <div class="exercise-container">
    <div class="top">
      <van-nav-bar title="发现" />
    </div>
    <div class="Interview">
      <van-nav-bar
        left-text="面试技巧"
        right-text="查看更多 >"
        @click-right="$router.push('/interviewing')"
      >
      </van-nav-bar>
    </div>
    <div class="techincItem" v-for="item in list" :key="item.id">
      <div class="left">
        <div class="left-top van-multi-ellipsis--l2">
          {{ item.title }}
        </div>
        <div class="left-bottom">
          <span class="t1" style="flex:1">{{
            item.updated_at | mymoment
          }}</span>

          <span class="t3"><van-icon name="eye-o" />{{ item.read }}</span>

          <span class="t5"><van-icon name="good-job-o" />{{ item.star }}</span>
        </div>
      </div>
      <img class="right" :src="'http://localhost:1337' + item.cover" alt="" />
    </div>

    <div class="bazaar Interview">
      <van-nav-bar left-text="市场数据" right-text="查看更多 >"> </van-nav-bar>
      <van-tag type="primary" size="large">{{ chartList.city }}</van-tag>
      <van-tag type="primary" size="large">{{ chartList.position }}</van-tag>

      <ul class="chart" ref="chart">
        <li
          class="chart-item"
          v-for="(item, index) in chartList.yearSalary"
          :key="index"
        >
          <!--  v-show="index < 3 || showAll" -->
          <div class="c1">{{ item.year.substr(0, 5) }}</div>
          <div style="width:216px">
            <div class="c2">
              <div
                class="line"
                :style="{
                  width: (item.salary / +chartList.topSalary) * 100 + '%'
                }"
              >
                ￥{{ item.salary }}
              </div>
            </div>
          </div>
          <div class="c3">
            <div v-if="item.percent != undefined">
              <i class="iconfont down" v-if="item.percent < 0"
                ><van-icon name="down"
              /></i>
              <i v-else class="iconfont c5"><van-icon name="down"/></i>
            </div>
          </div>
          <div class="c4">
            <span v-if="item.percent != undefined">{{ item.percent }}%</span>
          </div>
        </li>
      </ul>
      <div class="genduo" @click="move">
        <div v-if="!showAll">
          <span>展开更多</span>
        </div>
        <div v-else>
          <span>收起</span>
        </div>
      </div>
    </div>
    <!-- 面经分享 -->
    <div class="Interview">
      <van-nav-bar
        left-text="面经分享"
        right-text="查看更多 >"
        @click-right="$router.push('/Sharer')"
      >
      </van-nav-bar>
    </div>
    <div
      class="techincItem"
      v-for="item in share"
      :key="item.id"
      @click="$router.push({ path: '/particulars', query: { id: item.id } })"
    >
      <div class="left">
        <div class="left-top van-multi-ellipsis--l2">
          {{ item.title }}
        </div>
        <div class="content">{{ item.content }}</div>
        <div class="left-bottom">
          <span class="t1">
            <van-image
              width="25"
              round
              height="25"
              :src="'http://localhost:1337' + item.cover"
            />
          </span>
          <span class="t0">{{ item.author.nickname }}</span>
          <span class="t2">{{ item.updated_at | mymoment }}</span>
          <span class="t3"><van-icon name="chat-o" />{{ item.share }}</span>

          <span class="t5"><van-icon name="good-job-o" />{{ item.star }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { technicList, shareList, chartDatahot } from './exercise'
export default {
  name: 'exercise',
  data () {
    return {
      list: [],
      share: [],
      chartList: '',
      showAll: false
    }
  },
  methods: {
    move () {
      this.showAll = !this.showAll
      if (this.showAll) {
        this.$refs.chart.style.height = this.$refs.chart.scrollHeight + 'px'
      } else {
        this.$refs.chart.style.height =
          (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) *
            3 +
          'px'
      }
    }
  },
  //渲染面试技巧列表
  async created () {
    let res = await technicList()
    this.list = res.data.data.list
    let bad = await shareList()
    this.share = bad.data.data.list
    let res2 = await chartDatahot()
    // console.log(res2)
    this.chartList = res2.data.data
    this.$nextTick(() => {
      this.$refs.chart.style.height =
        (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) * 3 +
        'px'
    })
  },
  filters: {
    mymoment (value) {
      return moment(value).format('YYYY-MM-DD')
    }
  }
}
</script>

<style lang="less">
.exercise-container {
  .techincItem {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    box-shadow: 0px 25px 8px 0px rgba(24, 26, 57, 0.04);
    .left {
      display: flex;
      flex: 1;
      align-self: stretch;
      //改变flex主轴方向
      margin: 0 30px;
      flex-direction: column;
      margin-bottom: 20px;
      //主轴方向两端对齐
      justify-content: space-between;
      .content {
        font-size: 16px;
        height: 65px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden; /*这个参数根据需求来决定要不要*/
      }
      span:nth-child(2) {
        margin-right: 20px;
      }
      .left-top {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 550;
        text-align: left;
        color: #181a39;

        letter-spacing: 0px;
      }
      .left-bottom {
        margin-top: 20px;
        display: flex;
        font-size: 12px;
        color: #ccc;
        align-items: center;
        .t0 {
          margin-right: 150px;
          margin-left: 30px;
        }

        .t2 {
          margin-right: 100px;
        }
        .t3 {
          margin-right: 50px;
        }
      }
    }
    .right {
      width: 226px;
      height: 150px;
      object-fit: contain;
      margin-left: 16px;
      margin-right: 30px;
      float: right;
      margin-bottom: 20px;
      border-radius: 20px;
    }
  }

  .van-nav-bar__title.van-ellipsis {
    font-weight: 600;
    font-size: 36px;
    color: #222222;
  }
  .top {
    .van-nav-bar {
      box-shadow: 0px 4px 8px 0px rgba(24, 26, 57, 0.04);
    }
  }

  .Interview {
    .van-icon {
      font-size: 40px;
      margin-right: 20px;
      color: green;
    }
    .progress {
      margin: 0 30px;
      display: flex;
      align-items: center;
      span {
        font-size: 18px;
      }
      .myprogress {
        width: 450px;

        margin: 30px 20px;
      }
    }

    span.van-progress__pivot {
      background-color: transparent !important;
      transform: translate(-50%, -50%) !important;
    }
    .van-nav-bar {
      margin-top: 10px;
    }
    .van-nav-bar__left {
      .van-nav-bar__text {
        font-weight: 700;
        color: #222222;
      }
    }
    .van-nav-bar__right {
      .van-nav-bar__text {
        color: #5b5d75;
        font-size: 18px;
      }
    }
  }

  .bazaar {
    .chart {
      margin: 20px 30px;
      transition: height 1s;
      overflow: hidden;
      .chart-item {
        .down {
          .van-icon {
            font-size: 30px;
            margin-right: 20px;
            color: red;
          }
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #545671;
        font-size: 14px;
        line-height: 20px;
        padding: 4px 0;
        .c1 {
          width: 100px;
        }
        .c2 {
          flex: 1;
          height: 14px;
          background-color: #ebdfdf;
          border-radius: 4px;
          .line {
            border-radius: 4px;
            height: 100%;
            background-color: #fe6d67;
            color: #fff;
            text-align: right;
            font-size: 12px;
            line-height: 14px;
          }
        }
        .c3 {
          width: 20px;
          color: rgb(254, 109, 103);
        }
        .c4 {
          width: 55px;
        }
        .c5 {
          color: rgb(0, 212, 122);
          .van-icon {
            font-size: 30px;
            margin-right: 20px;
            transform: rotate(180deg);
          }
        }
      }
    }
    margin-top: 40px;
    box-shadow: 0px 25px 8px 0px rgba(24, 26, 57, 0.04);
    span.van-tag.van-tag--large.van-tag--primary {
      background: #cccc;
      color: #545671;
      margin-left: 30px;
    }
    .van-progress {
      margin-top: 50px;
    }
  }
  .genduo {
    text-align: center;
    span {
      font-size: 14px;
      font-weight: 400;
      text-align: center;
      color: #545671;
      line-height: 20px;
      letter-spacing: 0px;
    }
  }
}
</style>
